@import "../../assets/iconfont/iconfont";
@import "../styles/variables";
@import "../styles/animation";

@mixin tips-border($bgc, $border-color, $font-color) {

	font-family: $font;

	background: $bgc;
	border: 1px solid $border-color;
	border-radius: 2px;
	color: $font-color;

	font-size: 12px;
}

cc-tips {
	display: inline-block;

	box-sizing: border-box;

	height: 30px;

	p {

		@include tips-border(#ecf8fc, #d2eeff, #999999);

		margin: 0;

		line-height: 18px;
		padding: 5px 11px;
		position: relative;

		&.major {
			background: #fcf8e2;
			border: 1px solid #faecca;
			color: #666666;
		}
		&.warning {
			background: #fcf2f0;
			border: 1px solid #ffdfe0;
			color: #3a3a3a;
		}

		.expand-icon {
			display: none;
		}

		&.text-overflow {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-right: 45px;

			.expand-icon {
				@extend .iconfont;
				@extend .icon-arrow;
				display: inline;
				font-size: 12px;
				color: #B3B3B3;
				position: absolute;
				right: 11px;
				top: 6px;
				&:active {
					color: #878787;
				}
			}

			&.expand {
				white-space: normal;
				padding-right: 30px;
				.expand-icon {
					display: inline;
					transform: rotate(180deg);
				}
			}
		}

	}

}

.float-tips-container {

	& * {
		box-sizing: border-box;
	}

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 450px;
	z-index: $tips-z-index;
}

.float-tips {
	display: inline-flex;
	line-height: 18px;
	font-size: 12px;
	padding: 8px 14px 7px 20px;
	max-height: 120px;
	overflow: hidden;
	margin-top: 1px;

	&.tips-opening {
		animation-name: fade-in, slide-down;
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		animation-duration: .5s;
	}

	&.tips-fade-out {
		animation: .5s fade-out 0s ease-in;
	}

	&.tips-compress {
		opacity: 0;
		animation: .5s tips-height-compress 0s cubic-bezier(0.4, 0, 0.2, 1);
	}

	&.success {
		@include tips-border(#d8f2d4, #c3d3bf, #3a773a);
		.close-icon {
			color: #6DA89C;
		}
	}

	&.error {
		@include tips-border(#ffdfe0, #ffdfe0, #853432);
	}

	.message {
		width: 364px;
		word-break: break-all;
	}

	.success-icon {
		margin-right: 6px;
		display: inline-block;
		font-size: 16px;
		color: #389d25;
		@extend .iconfont;
		@extend .icon-right;
	}

	.error-icon {
		margin-right: 6px;
		font-size: 16px;
		color: #ff5243;
		@extend .iconfont;
		@extend .icon-caution;
	}

	.close-icon {
		@extend .iconfont;
		@extend .icon-close;
		margin-left: 20px;
		font-size: 12px;
		cursor: pointer;
		opacity: 0.6;

		&:hover {
			opacity: 0.8;
		}
	}

}

@keyframes tips-height-compress {
	to {
		max-height: 0;
		margin: 0;
		border: 0;
	}
}
